<template>
    <div>
        <!-- 头部橙色区域 -->
        
            <ul class="headerUl">
				<li class="mui-table-view-cell mui-media ">
					<a href="javascript:;">
						<!-- <img class="mui-media-object mui-pull-left" src="../../images/1.jpg"> -->
						<div class="touImg mui-pull-left .mui-col-xs-7"></div>
                        <div class="mui-media-body .mui-col-xs-5">
							<span class="more">设置</span>
                            <br>
							<span class="userName">蚊子</span>
                            <br>
                            
                            <span class="dengji">普通会员</span>
						
						</div>
					</a>
				</li>
            </ul>
        <!-- 全部订单区域 -->
            <div class="dd">
                <a class="mui-icon mui-icon-extra mui-icon-extra-order  mui-icon-left-nav mui-pull-left"></a>
                <span class="mui-pull-left allDD">全部订单</span>
                <a class="mui-icon mui-icon-arrowdown  mui-pull-right"></a>
            </div>
        <!-- 九宫格区域 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
                    <img src="../../images/member/daifukuan.png" alt="">
                    <div class="mui-media-body">待付款</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
                    <img src="../../images/member/daifahuo.png" alt="">
                    <div class="mui-media-body">待发货</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
                    <img src="../../images/member/icon-test.png" alt="">
                    <div class="mui-media-body">待收获</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
                    <img src="../../images/member/daipingjia.png" alt="">
                    <div class="mui-media-body">待评价</div></router-link></li>
             <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
                    <img src="../../images/member/shoucang.png" alt="">
                    <div class="mui-media-body">收藏夹</div></router-link></li>
         <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
                    <img src="../../images/member/ziyuan.png" alt="">
                    <div class="mui-media-body">优惠券</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
                    <img src="../../images/member/jinbi.png" alt="">
                    <div class="mui-media-body">我的积分</div></router-link></li>  
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
                    <img src="../../images/member/pingjia.png" alt="">
                    <div class="mui-media-body">我的评价</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
                    <img src="../../images/member/dizhi.png" alt="">
                    <div class="mui-media-body">我的地址</div></router-link></li>
        
        

        </ul> 
    </div>
</template>
<script>
    
</script>
<style  scoped>
   .headerUl{
      height: 150px;
       background:linear-gradient(to right, orangered,rgb(255, 153, 0));
       color: wheat;
       line-height: 25px
   }

   .touImg{
       width: 100px;
       height: 100px;
       background: white;
       background: url(../../images/touxiang.jpeg);
       background-size: 100px 100px;
       border-radius: 50%;
       margin-right: 10%;
       
   }
   .more{
      float: right; 
      font-size: 14px
   }
  .dd{
      width: 100%;
      height: 50px;
      background: white;
      border-bottom:solid 1px gray
  }
  .mui-icon {
      margin-left: 5%;
      /* font-size: 30px; */
      margin-top: 10px;
  }
  .allDD{
      margin: 12px 0 0 3%;
       /* font-size: 25px; */
  }
  .mui-grid-view.mui-grid-9{
        background-color: white;
        border: none;
}
 img{
    width: 50px;
    height: 50px;
}
</style>
